<!--
 * @FilePath     : /study_code/jquery/api-scrollTopSize.html
 * @Description  : 特殊的 scrollTop 滚动尺寸
 * @Date         : 2025-04-21 09:52:13
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-21 09:58:28
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <!-- <link rel="stylesheet" href="" /> -->
  </head>
  <body>
    <div
      id="outer-div"
      style="border: 1px solid black; width: 200px; height: 200px; overflow: auto"
    >
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text.
    </div>

    <script src="/jquery/dist/jquery.min.js"></script>
    <script>
      console.log(1, $(document).scrollTop()) //获取滚动条到顶部的垂直高度

      console.log(3, $('#outer-div')[0].scrollHeight) //获取div的实际高度

      console.log(2, $(document).scrollLeft()) //获取滚动条到左边的垂直宽度
    </script>
  </body>
</html>
